<script setup>
import {ref, reactive} from "vue";

const tableData = ref([
  {
    "name": "Tom",
    "age": 20,
    "gender": 1,
    "score": 78
  },
  {
    "name": "Rose",
    "age": 18,
    "gender": 2,
    "score": 86
  },
  {
    "name": "Jerry",
    "age": 26,
    "gender": 1,
    "score": 90
  },
  {
    "name": "Tony",
    "age": 30,
    "gender": 1,
    "score": 52
  }
])

const removeItem = function (index) {
  // 删除数据
  tableData.value.splice(index, 1)
}

const currentPage4 = ref(4)
const pageSize4 = ref(100)
const disabled = ref(false)
const background = ref(false)
const small = ref(false)

const handleSizeChange = (number) => {
  console.log(`${number} items per page`)
}
const handleCurrentChange = (number) => {
  console.log(`current page: ${number}`)
  // 加载下一页的数据
}
// ref 简单的变量 做动态代理
const dialogVisible = ref(false)

// reactive 深层嵌套变量
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const addData = function (index) {
  if (isAdd.value) {
    tableData.value.push(formItem.value)
    dialogVisible.value = false
  } else {
    tableData.value[index] = formItem.value
    dialogVisible.value = false
  }

}

const formItem = ref({
  "name": "",
  "age": undefined,
  "gender": undefined,
  "score": undefined
})

const showInfo = (index) => {
  dialogVisible.value = true
  const row = tableData.value[index]
  formItem.value = row
  isEdit.value = false
}

const isEdit = ref(true)
const isAdd = ref(true)
const add = function () {
  dialogVisible.value = true
  isEdit.value = true
  isAdd.value = true
}

const editItem = (index) => {
  dialogVisible.value = true
  const row = tableData.value[index]
  formItem.value = row
  formItem.value.index = index
  isEdit.value = true
  isAdd.value = false
}
</script>

<template>
  <el-button type="primary" @click="add">添加</el-button>

  <!-- 指令代码 v-bind v-model v-on  -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="序号" width="180">
      <template #default="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>

    <el-table-column prop="name" label="姓名" width="180"/>
    <el-table-column prop="age" label="年龄" width="180"/>
    <el-table-column prop="gender" label="性别">
      <template #default="scope">
        <span v-if="scope.row.gender === 1">男</span>
        <span v-if="scope.row.gender === 2">女</span>
      </template>
    </el-table-column>
    <el-table-column prop="score" label="成绩"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="removeItem(scope.$index)">删除</el-button>
        <el-button type="warning" @click="showInfo(scope.$index)">详情</el-button>
        <el-button type="warning" @click="editItem(scope.$index)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br>
  <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="jumper, total, sizes, prev, pager, next"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <hr>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

  <hr>


  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="70%">
    <el-form :model="formItem" label-width="120px">
      <el-form-item label="姓名">
        <el-input :disabled="!isEdit"  v-model="formItem.name"/>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="formItem.age"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="formItem.gender"/>
      </el-form-item>
      <el-form-item label="分数">
        <el-input v-model="formItem.score"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addData(formItem.index)">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>


</template>

<style scoped>

</style>
